<template>
  <div class="app-container">
    <div style="margin:15px 0;">
      请选择：
      <el-select v-model="labelValue" placeholder="请选择" style="margin-bottom:10px;">
        <el-option label="ALL" value="0"/>
        <el-option label="用户ID" value="1"/>
        <el-option label="手机号" value="2"/>
        <el-option label="昵称" value="3"/>
      </el-select>
      <el-input v-model="inputValue" placeholder="请填写 用户ID/手机号/昵称" style="width:300px;">
        <el-button slot="append" icon="el-icon-search" @click.native="search"/>
      </el-input>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @filter-change="handleFilterChange">
      <el-table-column align="center" label="用户ID" width="95" prop="userId" />
      <el-table-column align="center" label="用户状态" width="95">
        <template slot-scope="scope">
          <el-tag
            :type="filterLoginColor(scope.row.loginFlag)"
            disable-transitions>{{ scope.row.loginFlag == '0' ? '正常' : '冻结' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户昵称" prop="name" />
      <el-table-column align="center" label="手机号码" width="110" prop="mobile" />
      <el-table-column
        :column-key="'realState'"
        :filter-multiple="false"
        :filters="[{ text: '未实名', value: '1' }, { text: '审核中', value: '2' }, { text: '已实名', value: '3' }, { text: '驳回', value: '4' }]"
        :filter-method="filterStatus"
        prop="status"
        label="实名认证"
        width="90"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="filterStatusColor(scope.row.realState)"
            disable-transitions>{{ scope.row.realStateValue }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邀请码" prop="qrCode" />
      <el-table-column align="center" label="累计阅读时长(秒)" prop="readTimeCount" />
      <el-table-column align="center" label="累计阅读数量" prop="readNumberCount" />
      <el-table-column align="center" label="累计阅读收益(DLB)" prop="readGetdlbCount" />
      <el-table-column align="center" label="可用(DLB)" prop="availableDlb" />
      <el-table-column align="center" label="解锁中(DLB)" prop="unlockDlb" />
      <el-table-column align="center" label="已锁定(DLB)" prop="lockDlb" />
      <el-table-column align="center" label="钱包余额(DLB)" prop="walletCount" />
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">{{ scope.row.createDate | filterTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="收益详情" width="110">
        <template slot-scope="scope">
          <el-button size="mini" @click="viewDetail(scope.row.userId)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="下级好友" width="110">
        <template slot-scope="scope">
          <el-button size="mini" @click="viewShareList(scope.row.userId)">好友列表</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalPages>1" :total="total" :page.sync="listQuery.currentPages" :limit.sync="listQuery.pageSize" align="center" @pagination="fetchData" />
  </div>
</template>

<script>
import { getUserList } from '@/api/table'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils/index'

export default {
  name: 'List',
  components: { Pagination },
  filters: {
    filterTime(time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      labelValue: '1',
      inputValue: '',
      list: [],
      listLoading: true,
      total: 0,
      totalPages: 0,
      listQuery: {
        realState: '',
        currentPages: 1,
        pageSize: 10,
        userId: '',
        mobile: '',
        name: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getUserList(this.listQuery).then(response => {
        this.list = response.data.dataList
        this.total = response.data.totalElements
        this.totalPages = response.data.totalPages
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    search() {
      if (this.labelValue === '1') {
        this.listQuery.userId = this.inputValue
        this.listQuery.mobile = ''
        this.listQuery.name = ''
      } else if (this.labelValue === '2') {
        this.listQuery.mobile = this.inputValue
        this.listQuery.userId = ''
        this.listQuery.name = ''
      } else if (this.labelValue === '3') {
        this.listQuery.name = this.inputValue
        this.listQuery.userId = ''
        this.listQuery.mobile = ''
      } else {
        this.listQuery.userId = ''
        this.listQuery.mobile = ''
        this.listQuery.name = ''
      }
      this.fetchData()
    },
    handleFilterChange(filters) {
      this.listQuery.realState = filters.realState[0]
      this.fetchData()
    },
    viewDetail(id) {
      this.$router.push({
        name: 'Detail',
        query: {
          userId: id
        }
      })
    },
    viewShareList(id) {
      this.$router.push({
        name: 'ShareList',
        query: {
          userId: id
        }
      })
    },
    filterStatus(value, row) {
      return row.realState === value
    },
    filterLoginColor(status) {
      if (status === '0') {
        return 'success'
      } else if (status === '1') {
        return 'danger'
      }
    },
    filterStatusColor(status) {
      if (status === '1') {
        return 'info'
      } else if (status === '2') {
        return 'warning'
      } else if (status === '3') {
        return ''
      } else if (status === '4') {
        return 'danger'
      }
    }
  }
}
</script>
